<template>
  <div class="pagination-container">
    <el-pagination class="pagination" background :page-size="props.size" v-model:current-page="pageNo"
      @current-change="handleCurrentChange" :total="props.total" :pager-count="11" layout="prev, pager, next" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  total: {
    type: Number,
    default: 1000
  },
  size: {
    type: Number,
    default: 20
  },
  current: {
    type: Number,
    default: 1
  }
})
// 页数修改时通知父组件
const pageNo = ref(props.current)
const emit = defineEmits(['change'])
const handleCurrentChange = (val) => {
  pageNo.value = val
  emit('change', val)
}
</script>

<style scoped lang="scss">
.pagination-container {
  position: absolute;
  bottom: 3vh;
  height: 6vh;
  width: 92.5%;
  background-color: #fff;
  display: flex;
  justify-content: center;
}

// 修改当前选中页数样式
:deep(.pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #fafaff;
  color: #8c91f4;
}

// 修改页数样式
:deep(.pagination.is-background .el-pager li) {
  background-color: #fff;
  color: #1C385E;
}

// 修改下一页样式
:deep(.pagination.is-background .btn-next) {
  background-color: #fff;
  color: #1C385E;
}

// 修改上一页样式
:deep(.pagination.is-background .btn-prev) {
  background-color: #fff;
  color: #1C385E;
}
</style>